<template>
  <div class="recommend" style="width: 100%; padding: 10px 10px">
    <div class="customerInfos" style="width: 100%;line-height: 200px;height: 200px;margin: 0 auto">
      <div class="label">
        <div class="picture">
          <p class="labelItem" v-show="display" v-for="item in label">{{item}}</p>
        </div>
      </div>
    </div>
    <div class="custIntention">
      <p>客户意图预判：</p>
      <div>
        <p v-for="item2 in label2">{{item2}}</p>
      </div>
    </div>
    <div class="track">
      <avue-crud :data="data" :option="option" v-model="obj">
        <template slot-scope="scope" slot="filelabel">
          <el-link @click="routeToNine" target="_blank" type="primary">{{scope.row.filelabel[0]}}</el-link>
          <span v-show="scope.row.filelabel[0] && scope.row.filelabel[1]"> | </span>
          <el-link @click="routeToNine" target="_blank" type="primary">{{scope.row.filelabel[1]}}</el-link>
        </template>
      </avue-crud>
    </div>
    <div class="reminded">
      <p>重要提醒:</p>
      <div v-for="item1 in infoLabel">{{item1}}</div>
    </div>
    <div class="recommended">
      <p>营销推荐办理：</p>
      <div class="list" v-for="item in list">
        <span>{{item.label}}</span>
        <span>{{item.value}}</span>
      </div>
    </div>
  </div>
</template>

<script>
  import {recommend, querySessionLabelInfo} from '@/views/recommend/recommend1.js'

  export default {
    name: "recommend",
    data() {
      return {
        list: [],
        label: [],
        label2: [],
        infoLabel: [],
        obj: {},
        data: [],
        display: false,
        option: {
          title: '表格的标题',
          page: false,
          align: 'center',
          menuAlign: 'center',
          addBtn: false,
          refreshBtn: false,
          columnBtn: false,
          delBtn: false,
          editBtn: false,
          viewBtn: true,
          menuTitle: '摘要',
          column: [
            {
              label: '时间',
              prop: 'starttimestamp'
            }, {
              label: "渠道",
              prop: "channeltype",
            }, {
              label: "业务办理轨迹",
              prop: "filelabel",
              slot: true,
            }
          ]
        }
      }
    },
    mounted() {
//      this.querySessionLabelInfoFun(15353604577)
      let self = this
//      self.initData()
//      setTimeout(function () {
//        recommend()
//        self.display = true
//      }, 1000)
      // 电话页签
      window.eventEmitter.$on('EventCallRecordChange', () => {
        self.initData()
        setTimeout(function () {
          recommend()
          self.display = true
        }, 1000)
        self.querySessionLabelInfoFun(Constants.Model.uid)
      })
      // 在线页签
      window.eventEmitter.$on('EventChatRecordChange', () => {
        self.initData()
        setTimeout(function () {
          recommend()
          self.display = true
        }, 1000)
        self.querySessionLabelInfoFun(Constants.ModelChat.uid)
      })
      // 在线会话结束
      window.eventEmitter.$on('EventChatDone', () => {
        self.clearAll()
      })
      // 电话结束
      window.eventEmitter.$on('EventAfterCall', () => {
        self.clearAll()
      })
    },
    methods: {
      // 查询业务轨迹
      querySessionLabelInfoFun: function (cusNum) {
        return
        let tenantId = Constants.Agent.tenantId || 'default'
        querySessionLabelInfo(tenantId, cusNum).then(response => {
          let data = response.data
          console.log('response biz make trance is: ' + JSON.stringify(data))
          if (data.data) {
            data.data.map(item => {
              item.filelabel = item.filelabel.split('|')
            })
            this.data = data.data.slice(0,5)
          }
        }).catch(error => {
          console.log(error)
        })
      },
      // 全局清空
      clearAll: function () {
        this.list = []
        this.data = []
        this.label = []
        this.label2 = []
        this.infoLabel = []
      },
      // 全局赋值
      initData: function () {
        this.display = false
        this.list = [
          {
            label: '产品名称：',
            value: '理财产品天天盈'
          }, {
            label: '产品类型：',
            value: '非保本浮动收益 '
          }, {
            label: '期限：',
            value: '181天 '
          }, {
            label: '个人投资起点：',
            value: '100万 '
          }, {
            label: '认购日期：',
            value: '2020-01-13 '
          }, {
            label: '销售对象：',
            value: '个人'
          }, {
            label: '预期年化收益率：',
            value: '4.3%'
          }
        ]
        this.label = ['投资意愿强', '旅游达人', '消费率高', '收入稳定', '金领']
        this.label2 = ['账单查询与还款','信用卡分期','未出账单查询']
        this.infoLabel = ['客户已逾期','重要客户']
      },
      // 自定义按钮
      routeToNine () {
        this.$emit('routeToNine')
      }
    }
  }
</script>

<style scoped>
  > > > .avue-crud__menu {
    display: none;
  }

  .recommend {
    font-size: 14px;
    /*line-height: 300px;*/
    /*height: 300px;*/
  }

  .label {
    /*margin: 0 auto;*/
    width: 100%;
    text-align: center;
    margin-bottom: 30px;
  }

  .label p, .label div {
    display: inline-block;
  }

  .picture {
    position: absolute;
    margin-top: 20px;
    width: 94px;
    background: url('../../../public/assets/theme/img/recommend/headPhoto.png') no-repeat;
    height: 94px;
    border-radius: 47px;
  }

  .label p {
    width: 100px;
    min-height: 30px;
    line-height: 30px;
  }

  .custIntention div, .custIntention p, .reminded > p, .reminded > div {
    display: inline-block;
  }

  .custIntention > p, .reminded > p, .recommended p {
    margin-bottom: 20px;
    font-weight: bold;
    color: rgba(51, 51, 51, 1);
  }

  .custIntention div p, .reminded > div {
    margin-left: 20px;
    font-weight: 400;
    color: rgba(51, 51, 51, 1);
  }

  .reminded > div {
    color: rgba(255, 57, 57, 1);
  }

  .track {
    margin: 0px 0 30px 0;
  }

  .list {
    width: 50%;
    display: inline-block;
    margin-bottom: 10px;
  }

  .list span:nth-child(1) {
    font-weight: 400;
    color: rgba(143, 143, 145, 1);
  }

  .list span:nth-child(2) {
    font-weight: 400;
    color: rgba(51, 51, 51, 1);
  }

  .list span:nth-child(2), .list span:nth-child(1), .custIntention div p, .reminded > div, .custIntention > p, .reminded > p, .recommended p {
    font-size: 14px;
    font-family: Microsoft YaHei;
  }

  .recommended > div {
    padding: 0 20px;
  }

  .labelItem {
    position: absolute;
    border-radius: 100px;
    margin-left: 10px;
  }
</style>
